<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="renderer" content="webkit" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  <!-- <meta name="referrer" content="no-referrer"/> --> 
  <meta name="apple-mobile-web-app-capable" content="yes" /> 
  <title>uni-app仿生导航操作WebView（网络页面） - 米虫 - 做一个有理想的米虫 - www.mebugs.com</title> 
  <meta name="expires" content="Mon, 09 Apr 2999 09:09:09 GMT" /> 
  <meta name="description" content="页面中的WebView嵌入一个网络页面后，顶部原生导航栏默认是整个页面返回，而实际上我们需要操作的是WebView内网页的后退，因此我们可以通过获取子WebView对象进行操作 - 米虫 - 做一个有理想的米虫 - www.mebugs.com" /> 
  <meta name="keywords" content="米虫,程序员,博客,学习,工作,物联网,IT,经验,总结,分享,Java,Go,Linux,前端,数据库" /> 
  <link rel="icon" href="http://blog.mebugs.com/static/img/icon.png" /> 
  <link rel="shortcut icon" href="http://blog.mebugs.com/static/img/icon.png" /> 
  <link rel="apple-touch-icon-precomposed" href="http://blog.mebugs.com/static/img/icon.png" /> 
  <link href="http://blog.mebugs.com/static/css/load.css?v=1.0" rel="stylesheet" type="text/css" />
  <link href="http://blog.mebugs.com/static/css/base.css?v=1.0" rel="stylesheet" type="text/css" />
      <link href="http://blog.mebugs.com/static/css/post.css?v=1.0" rel="stylesheet" type="text/css" />
  <link href="http://blog.mebugs.com/static/css/coms.css?v=1.0" rel="stylesheet" type="text/css" /> 
  <link href="http://blog.mebugs.com/static/css/marked/marked.css?v=1.0" rel="stylesheet" type="text/css" /> 
            <link href="http://blog.mebugs.com/static/css/mobile/base.css?v=1.0" rel="stylesheet" type="text/css" media="screen and (max-device-width:1200px)" /> 
    <!-- 谷歌广告 -->
  <script data-ad-client="ca-pub-2699978133125218" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 </head> 
 <body> 
 <div class="loader" id="loader">
   <div class="load">
     <hr/><hr/><hr/><hr/>
   </div>
 </div>
  <header> 
   <div class="w"> 
    <a class="logo" href="/"></a> 
    <div class="menu"> 
     <a  href="/">首页</a> 
     <a class="mck" href="/posts/new_1.html">文章</a> 
     <a  href="/category/list_1.html">分类</a> 
     <a  href="/tag/list_1.html">标签</a> 
     <a  href="/page/about.html">关于</a> 
     <a  href="/page/link.html">友链</a> 
     <a  href="/page/msg.html">留言</a> 
     <a  href="/page/map.html">地图</a> 
    </div> 
    <div class="temp" onclick="setShow()"></div><div class="mobim" onclick="setMbm()"><ul><li></li><li></li><li></li></ul></div> 
        <div class="pomenu" onclick="doPmenu(true)"><div class="mmenu" id="pomenu" ><ul><li>‹</li><li></li><li>›</li></ul></div></div>
       </div> 
  </header>  <!-- POST TOP -->
  <div class="r rt"> 
   <div class="w tb_15"> 
    <div class="c c_12 pst"> 
     <div class="pt pct rtl"> 
      <h1>uni-app仿生导航操作WebView（网络页面）</h1> 
     </div> 
     <div class="pdest rtr">页面中的WebView嵌入一个网络页面后，顶部原生导航栏默认是整个页面返回，而实际上我们需要操作的是WebView内网页的后退，因此我们可以通过获取子WebView对象进行操作</div> 
    </div> 
   </div> 
  </div> 
  <div class="r"> 
   <div class="w tb_15"> 
    <div class="c c_3 prel"> 
     <div class="menue" id="menue"><ul><li><a href="javascript:runTo('menu_1')" class="pl1">需求描述</a> <!----></li><li><a href="javascript:runTo('menu_2')" class="pl1">解决方案</a> <ul><li><a href="javascript:runTo('menu_3')" class="pl2">无限WebView</a> <!----></li><li><a href="javascript:runTo('menu_4')" class="pl2">获取webView对象处理</a> <!----></li></ul></li><li><a href="javascript:runTo('menu_5')" class="pl1">实现效果</a> <!----></li></ul></div> 
    </div> 
    <div class="c c_9">
     <!-- post banner info -->
     <div class="mban"> 
      <img src="http://blog.mebugs.com/static/upload/banner/1645527166229.jpg" /> 
            <div class="pfro">
        <p>
          <span>所属分类</span>
          <b class="pta"><a href="/category/app_1.html">移动端</a> </b>
        </p>
        <p>
          <span>相关标签</span>
          <b class="pta"><a href="/tag/uniapp_1.html">uni-app</a><a href="/tag/webview_1.html">WebView</a><a href="/tag/header_1.html">导航</a></b>
        </p>
      </div>
           </div>
     <!-- post content -->
     <div id="html" class="output mark"><h1 id="menu_1">需求描述</h1><p>uni-app的开发实际上本身就是在WebView上开发，只不过很多时候加载的是本地的网页资源。</p>
<p>而在uni-app中嵌入一个网络页面（外部资源），官方也提供了案例就是vue页面中在创建一个web-view标签。</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">web-view</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;http://www.mebugs.com/&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">web-view</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</code></pre>
<p>加载一个网络页面需要解决一个比较尴尬的问题就是网页中做的导航和原生导航共存的问题。</p>
<p>对于APP而言，我们希望尽量使用原生导航，所以在实现中往往隐藏网页自带的导航，然后通过原生导航操作页面。</p>
<p>于是会发现一个问题，原生导航的返回往往是返回到上一个页面（这里指的是uni-app工程里面的上一页）。</p>
<h1 id="menu_2">解决方案</h1><h2 id="menu_3">无限WebView</h2><ol>
<li>创建一个公共的网络页面加载器（加载器就一个web-view组件，src属性需由外部传入）</li>
<li>网络页面识别访问者是APP时，触发新页面访问需要向父组件发送消息（消息内容为新URL），并阻断原生事件</li>
<li>uni-app（加载器）监听消息，再次向加载器发起新的navigate跳转请求，携带新的消息中URL</li>
<li>触发跳转后的原生导航就是常规的返回</li>
</ol>
<p>优点：</p>
<ul>
<li>几乎与原生完全一致的体验</li>
<li>前进后退的路由栈完全一致不会出错</li>
</ul>
<p>缺点：</p>
<ul>
<li>需要远端页面修改代码配合</li>
<li>性能不好（疯狂开WebView性能当然不好）</li>
<li>某些场景会不兼容，无限WebView类似于在浏览器上不断打开新Tab页，某些需要记录上一页或来源reffer的场景无法兼容</li>
</ul>
<h2 id="menu_4">获取webView对象处理</h2><ol>
<li>网络页面加载器（加载器就一个web-view组件，src属性可由外部传入）</li>
<li>获取当前页面的子WebView（实际加载网络页面的WebView）对象</li>
<li>监听子WebView对象并创建计数器</li>
<li>子WebView对象加载新页面是更新计数器</li>
<li>触发原生返回按钮时根据计数器判断执行子WebView回退还是页面navigateBack</li>
</ol>
<pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">web-view</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;http://www.mebugs.com/&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">web-view</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
        <span class="hljs-title function_">onNavigationBarButtonTap</span>(<span class="hljs-params">e</span>) {
            <span class="hljs-keyword">var</span> index = e.<span class="hljs-property">index</span>;
            <span class="hljs-keyword">if</span>(index == <span class="hljs-number">0</span>) {
                <span class="hljs-comment">// 如果计数器&gt;1 执行自WebView回退</span>
                <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">index</span> &gt; <span class="hljs-number">1</span>) {
                    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">back</span>()
                }<span class="hljs-keyword">else</span>{
                    <span class="hljs-comment">// 框架回退</span>
                    uni.<span class="hljs-title function_">navigateBack</span>()  
                }
            }
            <span class="hljs-comment">// 个人中心</span>
            <span class="hljs-keyword">if</span>(index == <span class="hljs-number">1</span>)
            uni.<span class="hljs-title function_">navigateTo</span>({
                <span class="hljs-attr">url</span>: <span class="hljs-string">&#x27;/pages/index/mine&#x27;</span>
            })
        },
        <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>) {
            <span class="hljs-keyword">return</span> {
                <span class="hljs-attr">currentWebview</span>: <span class="hljs-literal">false</span>,
                <span class="hljs-attr">view</span>: <span class="hljs-literal">false</span>,
                <span class="hljs-attr">index</span>: <span class="hljs-number">0</span>
            }
        },
        <span class="hljs-title function_">onReady</span>(<span class="hljs-params"></span>) { 
            <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">initWebview</span>()
        },
        <span class="hljs-attr">methods</span>: {
            <span class="hljs-title function_">initWebview</span>(<span class="hljs-params"></span>) { <span class="hljs-comment">//初始化并获取子WebView</span>
                <span class="hljs-comment">// #ifdef APP-PLUS</span>
                <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentWebview</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$scope</span>.$getAppWebview() 
                <span class="hljs-keyword">let</span> this_ = <span class="hljs-variable language_">this</span>
                <span class="hljs-comment">// 避免初始化失败 延时判断</span>
                <span class="hljs-built_in">setTimeout</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
                    this_.<span class="hljs-property">view</span> = this_.<span class="hljs-property">currentWebview</span>.<span class="hljs-title function_">children</span>()[<span class="hljs-number">0</span>]
                    <span class="hljs-keyword">if</span>(this_.<span class="hljs-property">view</span>) {
                        <span class="hljs-comment">// 子WebView绑定打开新页面触发的事件方法</span>
                        this_.<span class="hljs-property">view</span>.<span class="hljs-property">onloading</span> = this_.<span class="hljs-title function_">loadNewUrl</span>()
                    }<span class="hljs-keyword">else</span>{
                        <span class="hljs-comment">// 如果子WebView还是没有 递归获取</span>
                        this_.<span class="hljs-title function_">initWebview</span>()
                    }
                }, <span class="hljs-number">1000</span>)
                <span class="hljs-comment">// #endif</span>
            },
            <span class="hljs-title function_">back</span>(<span class="hljs-params"></span>) {
                <span class="hljs-comment">// 子webView回退</span>
                <span class="hljs-variable language_">this</span>.<span class="hljs-property">view</span>.<span class="hljs-title function_">back</span>()
                <span class="hljs-variable language_">this</span>.<span class="hljs-property">index</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">index</span> - <span class="hljs-number">1</span>
            },
            <span class="hljs-title function_">loadNewUrl</span>(<span class="hljs-params"></span>) {
                <span class="hljs-comment">// 计数器增加</span>
                <span class="hljs-variable language_">this</span>.<span class="hljs-property">index</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">index</span> + <span class="hljs-number">1</span>
            }
        }
    }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<h1 id="menu_5">实现效果</h1><p><img src="/static/upload/post/1645527176903.jpg" alt="/static/upload/post/1645527176903.jpg"/></p>
</div>
     <!-- author -->
     <div class="row">
      <div class="authors">
       <div class="mea"> 
        <img class="meavt" src="/static/img/me_avator.jpg" /> 
        <div class="meainfo">
            <h1>米虫</h1>
            <p>做一个有理想的米虫，伪全栈程序猿，乐观主义者，坚信一切都是最好的安排！</p> 
            <div class="meconn">
             <a href="http://wpa.qq.com/msgrd?v=3&uin=7431346&site=qq&menu=yes" target="_blank" class="conn cqq"></a>
             <a href="mailto:iam@qiantaoyuan.com" target="_blank" class="conn cml"></a> 
             <a href="https://gitee.com/mebugs" target="_blank" class="conn cge"></a> 
             <a href="https://github.com/mebugs" target="_blank" class="conn cgb"></a>
            </div> 
           </div> 
       </div>
       <div class="mecpr">
        <p>本站由个人原创、收集或整理，如涉及侵权请联系删除</p>
        <p>本站内容支持转发，希望贵方携带转载信息和原文链接</p>
        <p>本站具有时效性，不提供有效、可用和准确等相关保证</p>
        <p>本站不提供免费技术支持，暂不推荐您使用案例商业化</p>
       </div>
      </div>
     </div>
    </div>
    <div class="c c_12" id="mother"> 
          <!-- comms form -->
     <div class="row">
      <div class="pt"> <h1>发表观点</h1> <a class="mr" href="javascript:helpComms()">提示</a> </div> 
      <div class="box"> 
       <div class="comme"> 
        <div class="namee"> 
         <div class="navt" onclick="chooseAvt()"><img id="avt" src="/static/upload/avtor/1.jpg" /><p class="bgl">选择头像</p></div> 
         <div class="nxinfo"> 
          <div class="nipt"><p>昵称</p><input id="name" type="text" placeholder="*必填,请输入您的昵称" /></div> 
          <div class="nipt"><p>邮箱</p><input id="email" type="text" placeholder="推荐选填,请输入您的电子邮箱" /></div> 
          <div class="nipt"><p>QQ</p><input id="qq" type="text" placeholder="选填,请输入您的联系QQ" /></div> 
          <div class="nipt"><p>网址</p><input id="url" type="text" placeholder="选填,请输入您的个人主页地址" /></div> 
         </div> 
        </div> 
        <div class="ctxe"><textarea id="coms" name="coms" placeholder="*必填,请输入您的精彩观点"></textarea></div> 
        <div class="sendc"><a class="bgl" href="javascript:sendComms(1014,1,0)">提交观点</a></div> 
       </div>
      </div> 
     </div>
     <!-- comms eare -->
     <div class="row">
      <div class="commi">
      <p>当前还没有观点发布，欢迎您留下足迹！</p>      </div>
           </div> 
          <!-- sml imgs -->
     <div class="row">
      <div class="box"> 
       <div class="mequc indimg">
        <div class="mequci"><a href="/category/open_1.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264859337.png" /></a></div> <div class="mequci"><a href="/page/msg.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264883629.jpg" /></a></div> <div class="mequci"><a href="/page/link.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264902496.jpg" /></a></div> <div class="mequci"><a href="/page/map.html"><img class="scale" src="http://blog.mebugs.com/static/upload/urls/1643264913873.jpg" /></a></div>        </div> 
      </div> 
     </div>
          <!-- like post -->
     <div class="row">
      <div class="pt"> 
       <h1>同类其他</h1>
       <a class="mr" href="/category/app_1.html">移动端</a>      </div> 
      <div class="box pm pa_4"> 
                  <a href="/post/asgradlecf.html"> 
        <div class="pimel">
          <img class="scale" src="http://blog.mebugs.com/static/upload/banner/100_1646006214760.jpg" /> 
        </div>
        <div class="pinfr"> 
         <h2>Android Studio关闭网络代理（同步gradle配置）</h2> 
         <p class="pdesc">现阶段中Android Studio所需要的绝大多数SDK和依赖一般都不需要使用网络代理去访问，但是仅仅在Android Studio关闭代理配置不能完成使得设置生效，还需要gradle.properties中删除配置。</p> 
        </div> 
      </a> 
            </div>
     </div>
         </div>
    <!-- more post new hot rand -->
    <div class="c c_4">
     <!-- new -->
     <div class="row"> 
      <div class="pt"><h1>新鲜发布</h1><a class="mr" href="/posts/new_1.html">更多</a></div> 
            <div class="box lm"> 
              <a href="/post/nvmnjs.html">  
        <div class="pimel ltop bgl">1</div> 
        <div class="pinfr"><h2>nvm管理node.js和npm多版本切换</h2></div> 
       </a>
              <a href="/post/bsonon.html">  
        <div class="pimel ltop bgl">2</div> 
        <div class="pinfr"><h2>BSON数据结构以及与JSON区别</h2></div> 
       </a>
              <a href="/post/endeco.html">  
        <div class="pimel ltop bgl">3</div> 
        <div class="pinfr"><h2>可逆（对称和非对称）与不可逆加密算法</h2></div> 
       </a>
              <a href="/post/gointfc.html">  
        <div class="pimel ltop bgl">4</div> 
        <div class="pinfr"><h2>Go中接口的设计与实现</h2></div> 
       </a>
              <a href="/post/locklock.html">  
        <div class="pimel ltop bgl">5</div> 
        <div class="pinfr"><h2>计算机中的乐观锁与悲观锁</h2></div> 
       </a>
              <a href="/post/soapjvm.html">  
        <div class="pimel ltop bgl">6</div> 
        <div class="pinfr"><h2>SoapUI启动报错The JVM could not be started</h2></div> 
       </a>
              <a href="/post/orajob.html">  
        <div class="pimel ltop bgl">7</div> 
        <div class="pinfr"><h2>Orcale定时任务管理dbms_job</h2></div> 
       </a>
              <a href="/post/mebugs.html">  
        <div class="pimel ltop bgl">8</div> 
        <div class="pinfr"><h2>20220304米虫博客全站改版</h2></div> 
       </a>
              <a href="/post/meals.html">  
        <div class="pimel ltop bgl">9</div> 
        <div class="pinfr"><h2>MealS（干饭人）用户角色权限集增强版脚手架</h2></div> 
       </a>
              <a href="/post/meal.html">  
        <div class="pimel ltop bgl">10</div> 
        <div class="pinfr"><h2>Meal（一顿饭）基础用户权限管理脚手架</h2></div> 
       </a>
             </div> 
     </div>  
    </div>
    <div class="c c_4">
      <!-- new -->
      <div class="row"> 
       <div class="pt"><h1>近期飙升</h1><a class="mr" href="/posts/up_1.html">更多</a></div> 
              <div class="box lm"> 
                <a href="/post/mebugs.html">  
         <div class="pimel ltop bgl">1</div> 
         <div class="pinfr"><h2>20220304米虫博客全站改版</h2></div> 
        </a>
                <a href="/post/smvcdata.html">  
         <div class="pimel ltop bgl">2</div> 
         <div class="pinfr"><h2>一文理解SpringMVC框架核心</h2></div> 
        </a>
                <a href="/post/holdgbean.html">  
         <div class="pimel ltop bgl">3</div> 
         <div class="pinfr"><h2>SpringContextHolder工具类自由获取Bean</h2></div> 
        </a>
                <a href="/post/slideres.html">  
         <div class="pimel ltop bgl">4</div> 
         <div class="pinfr"><h2>侧边栏下滑即将越过时动态固顶与上滑恢复</h2></div> 
        </a>
                <a href="/post/ctrfctmod.html">  
         <div class="pimel ltop bgl">5</div> 
         <div class="pinfr"><h2>JAVA设计模式之创建者模式中的三种工厂模式</h2></div> 
        </a>
                <a href="/post/meals.html">  
         <div class="pimel ltop bgl">6</div> 
         <div class="pinfr"><h2>MealS（干饭人）用户角色权限集增强版脚手架</h2></div> 
        </a>
                <a href="/post/oraclelilog.html">  
         <div class="pimel ltop bgl">7</div> 
         <div class="pinfr"><h2>Linux下Oracle数据库配置日志目录及统一迁移</h2></div> 
        </a>
                <a href="/post/getpramnoc.html">  
         <div class="pimel ltop bgl">8</div> 
         <div class="pinfr"><h2>JAVA服务端GET请求URL中文参数乱码</h2></div> 
        </a>
                <a href="/post/meal.html">  
         <div class="pimel ltop bgl">9</div> 
         <div class="pinfr"><h2>Meal（一顿饭）基础用户权限管理脚手架</h2></div> 
        </a>
                <a href="/post/sqlcashw.html">  
         <div class="pimel ltop bgl">10</div> 
         <div class="pinfr"><h2>SQL通过CASE WHEN语句实现条件返回</h2></div> 
        </a>
               </div> 
      </div>  
    </div>
    <div class="c c_4">
      <!-- new -->
      <div class="row"> 
       <div class="pt"><h1>随便看看</h1><a class="mr" href="/posts/rand_1.html">更多</a></div> 
              <div class="box lm"> 
                <a href="/post/nvmnjs.html">  
         <div class="pimel ltop bgl">1</div> 
         <div class="pinfr"><h2>nvm管理node.js和npm多版本切换</h2></div> 
        </a>
                <a href="/post/bsonon.html">  
         <div class="pimel ltop bgl">2</div> 
         <div class="pinfr"><h2>BSON数据结构以及与JSON区别</h2></div> 
        </a>
                <a href="/post/endeco.html">  
         <div class="pimel ltop bgl">3</div> 
         <div class="pinfr"><h2>可逆（对称和非对称）与不可逆加密算法</h2></div> 
        </a>
                <a href="/post/gointfc.html">  
         <div class="pimel ltop bgl">4</div> 
         <div class="pinfr"><h2>Go中接口的设计与实现</h2></div> 
        </a>
                <a href="/post/locklock.html">  
         <div class="pimel ltop bgl">5</div> 
         <div class="pinfr"><h2>计算机中的乐观锁与悲观锁</h2></div> 
        </a>
                <a href="/post/soapjvm.html">  
         <div class="pimel ltop bgl">6</div> 
         <div class="pinfr"><h2>SoapUI启动报错The JVM could not be started</h2></div> 
        </a>
                <a href="/post/orajob.html">  
         <div class="pimel ltop bgl">7</div> 
         <div class="pinfr"><h2>Orcale定时任务管理dbms_job</h2></div> 
        </a>
                <a href="/post/mebugs.html">  
         <div class="pimel ltop bgl">8</div> 
         <div class="pinfr"><h2>20220304米虫博客全站改版</h2></div> 
        </a>
                <a href="/post/meals.html">  
         <div class="pimel ltop bgl">9</div> 
         <div class="pinfr"><h2>MealS（干饭人）用户角色权限集增强版脚手架</h2></div> 
        </a>
                <a href="/post/meal.html">  
         <div class="pimel ltop bgl">10</div> 
         <div class="pinfr"><h2>Meal（一顿饭）基础用户权限管理脚手架</h2></div> 
        </a>
               </div> 
      </div>  
    </div>
   </div>
  </div> 
  <footer> 
   <div class="w"> 
    <div class="c c_6"> 
     <div class="ft fl"> 
      <div class="pt pct">
       <h1>快捷分类</h1> 
      </div>
      <p>
        <a href="/posts/best_1.html">好文荐读</a>
        <a href="/posts/hot_1.html">全站热门</a>
        <a href="/posts/new_1.html">最新发布</a>
        <a href="/posts/up_1.html">近期飙升</a>
        <a href="/posts/rand_1.html">今日随选</a>
      <a href="/category/java_1.html">JAVA</a><a href="/category/web_1.html">WEB</a><a href="/category/db_1.html">数据库</a><a href="/category/linux_1.html">Linux</a><a href="/category/tool_1.html">工具</a><a href="/category/well_1.html">运维</a><a href="/category/php_1.html">PHP</a><a href="/category/app_1.html">移动端</a><a href="/category/plat_1.html">架构</a><a href="/category/open_1.html">开源</a><a href="/category/go_1.html">Golang</a><a href="/category/conn_1.html">概念</a><a href="/category/run_1.html">数据</a><a href="/category/net_1.html">中间件</a><a href="/category/security_1.html">安全</a><a href="/category/box_1.html">杂谈</a>      </p>
     </div> 
    </div>
    <div class="c c_6"> 
     <div class="ft fr"> 
      <div class="pt pct">
       <h1>热点标签</h1> 
      </div>
      <p> 
      <a href="/tag/css_1.html">CSS</a><a href="/tag/jquery_1.html">JQuery</a><a href="/tag/oracle_1.html">Oracle</a><a href="/tag/method_1.html">方法</a><a href="/tag/dismod_1.html">设计</a><a href="/tag/factory_1.html">工厂</a><a href="/tag/scripts_1.html">脚本</a><a href="/tag/confx_1.html">配置</a><a href="/tag/sql_1.html">SQL</a><a href="/tag/conn_1.html">连接</a><a href="/tag/windows_1.html">Windows</a><a href="/tag/spring_1.html">Spring</a><a href="/tag/springboot_1.html">SpringBoot</a><a href="/tag/mvc_1.html">MVC</a><a href="/tag/request_1.html">请求</a><a href="/tag/git_1.html">Git</a><a href="/tag/object_1.html">对象</a><a href="/tag/disk_1.html">磁盘</a><a href="/tag/tasks_1.html">任务</a><a href="/tag/load_1.html">加载</a><a href="/tag/password_1.html">密码</a><a href="/tag/header_1.html">导航</a><a href="/tag/log_1.html">日志</a><a href="/tag/datas_1.html">数据</a><a href="/tag/crete_1.html">创建</a><a href="/tag/morff_1.html">高并发</a><a href="/tag/maven_1.html">Maven</a><a href="/tag/ift_1.html">条件</a><a href="/tag/vers_1.html">版本</a><a href="/tag/springmvc_1.html">SpringMVC</a>      </p>
     </div> 
    </div> 
    <div class="c c_12"> 
     <div class="fu"> 
      <p>米虫<em>[独立博客]</em> 丨 <a href="/">www.mebugs.com</a> 丨 <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备20039109号</a>丨 做一个有理想的米虫</p> 
      <p><a href="/page/about.html">关于</a> 丨 <a href="/page/msg.html">留言</a> 丨 <a href="/page/link.html">友链</a> 丨 <a href="/page/map.html">地图</a></p> 
     </div> 
    </div> 
   </div> 
  </footer> 
  <div class="back_top" onclick="backTop()"> </div> 
   
  <div class="rzz" id="cavt">
    <div class="rea cave box">
      <div class="reat">
        <h1>选择个人头像</h1>
      </div>
      <div class="avts">
        <img src="/static/upload/avtor/1.jpg" onclick="setAvt(this,1)" />
        <img src="/static/upload/avtor/2.jpg" onclick="setAvt(this,2)" />
        <img src="/static/upload/avtor/3.jpg" onclick="setAvt(this,3)" />
        <img src="/static/upload/avtor/4.jpg" onclick="setAvt(this,4)" />
        <img src="/static/upload/avtor/5.jpg" onclick="setAvt(this,5)" />
        <img src="/static/upload/avtor/6.jpg" onclick="setAvt(this,6)" />
        <img src="/static/upload/avtor/7.jpg" onclick="setAvt(this,7)" />
        <img src="/static/upload/avtor/8.jpg" onclick="setAvt(this,8)" />
        <img src="/static/upload/avtor/9.jpg" onclick="setAvt(this,9)" />
        <img src="/static/upload/avtor/10.jpg" onclick="setAvt(this,10)" />
        <img src="/static/upload/avtor/11.jpg" onclick="setAvt(this,11)" />
        <img src="/static/upload/avtor/12.jpg" onclick="setAvt(this,12)" />
      </div>
      <div class="sendc"> 
        <a class="rcls" href="javascript:clsAvt()">关闭</a>
      </div> 
    </div>
  </div>
  <div class="rzz" id="rzz">
    <div class="rea box">
      <div class="reat">
        <h1 id="rwork"></h1>
      </div>
      <div class="comme">
       <div class="namee">  
        <div class="nxinfo"> 
         <div class="nipt"> 
          <p>昵称</p> 
          <input id="rname" type="text" placeholder="*必填,请输入您的昵称" /> 
         </div> 
         <div class="nipt"> 
          <p>邮箱</p> 
          <input id="remail" type="text" placeholder="推荐选填,请输入您的电子邮箱" /> 
         </div> 
         <div class="nipt"> 
          <p>QQ</p> 
          <input id="rqq" type="text" placeholder="选填,请输入您的联系QQ" /> 
         </div> 
         <div class="nipt"> 
          <p>网址</p> 
          <input id="rurl" type="text" placeholder="选填,请输入您的个人主页地址" /> 
         </div> 
        </div> 
       </div> 
       <div class="ctxe"> 
        <textarea id="rcoms" name="rcoms" placeholder="*必填,请输入您的精彩观点"></textarea> 
       </div> 
       <div class="sendc"> 
        <a class="rcls" href="javascript:clsComms()">取消</a> 
        <a id="repMethod" class="bgl" href="#">回复观点</a> 
       </div> 
      </div> 
    </div>
  </div>
  <div class="rzz" id="chelp">
    <div class="rea box chelp">
      <div class="reat">
        <h1>评论提示</h1>
      </div>
      <div class="helpe">
        <ul>
          <li>头像：系统为您提供了12个头像自由选择，初次打开随机为你选择一个</li>
          <li>邮箱：可选提交邮箱，该信息不会外泄，或将上线管理员回复邮件通知</li>
          <li>网址：可选提交网址，评论区该地址将以外链的形式展示在您的昵称上</li>
          <li>记忆：浏览器将记忆您已选择或填写过得信息，下次评论无需重复输入</li>
          <li>审核：提供一个和谐友善的评论环境，本站所有评论需要经过人工审核</li>
        </ul>
      </div>
      <div class="sendc">
       <a class="bgl" href="javascript:clsHelpComms()">了解</a> 
      </div>
    </div>
  </div>
    </div> 
  <script type="text/javascript">
    var pid = 1014;  </script>
  <script src="http://blog.mebugs.com/static/js/base.js?v=1.0"></script> 
         <script src="http://blog.mebugs.com/static/lib/jquery/jquery-3.6.0.min.js?v=1.0"></script>
   <script src="http://blog.mebugs.com/static/js/popup.js?v=1.0"></script>  
   <script src="http://blog.mebugs.com/static/js/post.js?v=1.0"></script> 
   <script src="http://blog.mebugs.com/static/js/mark.js?v=1.0"></script> 
       </body>
</html>